/*
 * @Author: Dingxu 
 * @Date: 2017-11-21 19:53:36 
 * @Last Modified by:   Dingxu 
 * @Last Modified time: 2017-11-21 19:53:36 
 */
<template>
  <div>
    <h1>Latest Vue.js Commits</h1>
    <template v-for="branch in branches">
      <input :id="branch" :key="branch" type="radio" :value="branch" v-model="currentBranch">
      <label :for="branch" :key="branch">{{branch}}</label>
    </template>
    <p>Vuejs/vue@{{currentBranch}}</p>
    <ul>
      <li v-for="record in commits" :key="record.sha">
        <a :href="record.html_url" target="_blank" class="commit">{{record.sha.slice(0,7)}}</a>
        -<span class="message">{{record.commit.message|truncate}}</span><br/>
        by<span class="author">
          <a :href="record.author.html_url" target="_blank">{{record.author.name}}</a>
          at<span class="date">{{record.commit.author.date|fromatDate}}</span>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
const apiUrl = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha='
export default{
  data() {
    return {
      branches: ['master', 'dev'],
      currentBranch: 'master',
      commits: null
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    currentBranch() {
      this.fetchData()
    }
  },
  filters: {
    truncate(value) {
      var newline = value.indexOf('\n')
      return newline > 0 ? value.slice(0, newline) : value
    },
    fromatDate(value) {
      return value.replace(/T|Z/g, ' ')
    }
  },
  methods: {
    fetchData() {
      const xhr = new XMLHttpRequest()
      xhr.open('GET', apiUrl + this.currentBranch)
      xhr.onload = () => {
        this.commits = JSON.parse(xhr.responseText)
      }
      xhr.send()
    }
  }
}
</script>
<style lang="scss" scoped>
a{
  text-decoration: none;
  color:#f66;
}
li{
  line-height: 1.5em;
  margin-bottom: 20px;
}
.author,.date{
  font-weight: bold;
}
</style>

